<template>
    <div :style="cmArea" id="askeyboardmask">
        <div
            id="askeyboardarea"
            :style="cmPos"
            v-popresizezoom="{ ujt, size: $global.keyboard.areastyle }"
        >
            <AsKeyBoard :ujt="ujt"></AsKeyBoard>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    ujt: any;
}

const props = defineProps<Props>();

const { $dbwork, $global } = props.ujt;

const cmArea = computed(() => {
    if ($global.keyboard.params?.ot?.style?.area) {
        return $global.keyboard.params.ot.style.area;
    } else {
        const tmStyle: any = {
            width: $global.sys.zoomwidth || 1920,
            height: $global.sys.zoomheight || 1080,
        };
        tmStyle.width += 'px';
        tmStyle.height += 'px';
        return tmStyle;
    }
});
const cmPos = computed(() => {
    if ($global.keyboard.params?.ot?.style?.main) {
        return $global.keyboard.params.ot.style.main;
    } else {
        const tmStyle: any = {
            maxWidth: $global.sys.zoomwidth || 1920,
            maxHeight: $global.sys.zoomheight || 1080,
        };
        if ($global.keyboard.areastyle?.w == undefined) {
            $global.keyboard.areastyle.w = 1000;
        }
        if ($global.keyboard.areastyle?.h == undefined) {
            $global.keyboard.areastyle.h = 388;
        }
        if ($global.keyboard.areastyle?.x == undefined) {
            $global.keyboard.areastyle.x =
                (tmStyle.maxWidth - $global.keyboard.areastyle.w) / 2;
        }
        if ($global.keyboard.areastyle?.y == undefined) {
            $global.keyboard.areastyle.y =
                tmStyle.maxHeight - $global.keyboard.areastyle.h - 112;
        }
        tmStyle.maxWidth += 'px';
        tmStyle.maxHeight += 'px';
        tmStyle.transform = `translate(${$global.keyboard.areastyle.x}px, ${$global.keyboard.areastyle.y}px)`;
        tmStyle.width = $global.keyboard.areastyle.w + 'px';
        tmStyle.height = $global.keyboard.areastyle.h + 'px';
        return tmStyle;
    }
});
</script>

<style scoped lang="scss">
#askeyboardmask {
    pointer-events: none;
    position: fixed;
    z-index: 8000;

    #askeyboardarea {
        position: relative;
        pointer-events: auto;
        background-color: var(--ch2);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
}
</style>
